<template>
  <div>
    <div class="title">-精选主题-</div>
      <ul>
        <li
          class="item border-bottom"
          v-for="item of List"
          :key="item.id"
        >   <div class =item-img-wrapper>
              <img class="item-img" :src="item.imgUrl" />
            </div>
          <div class="item-info">
            <p class="item-title">{{item.title}}</p>
            <p class="item-desc">{{item.desc}}</p>
             <p class="item-location">{{item.location}}</p>
          </div>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  data () {
      return{
      List:[{
          id:"0001",
          imgUrl:"https://pics.lvjs.com.cn/pics//uploads/pc/place2/2016-07-12/e6b7d30e-477c-4de6-a4cb-93f3c028e838_480_320.jpg",
          title:"苏州，乌镇，杭州3日游",
          desc:"纯玩0购物，一天一座城，优选江南“5A“级景区，双园林，赏乌镇日夜景，穿越宋城游西湖，赠送姑苏水上游，可升级乌镇内酒店",
          location:"出发地：杭州"
      },{
          id:"0002",
          imgUrl:"https://pics.lvjs.com.cn/pics/super/2017/12/1512373584_54398.jpg",
          title:"普陀山2日观光巴士游",
          desc:"杭州市区范围内上门接，登普陀至高点佛顶山，纯玩2日，宿岛上海边客栈免费WIFI，含早送矿泉水，祈福还愿领略佛教风景",
          location:"出发地：苏州"
      },{
          id:"0002",
          imgUrl:"https://pics.lvjs.com.cn/pics/super/2017/10/1508405143_80427.jpg",
          title:"乌镇西栅 旧时光巴士1日游",
          desc:"体验摇橹船、书场听戏、下午茶、西栅夜景、15人VIP纯玩0购物小包团",
          location:"出发地：扬州"
      }
     ]
      }
  },
}

</script>
<style lang="stylus" scoped>
  .title
    margin-top:.3rem
    margin-bottom :.3rem
    line-height: .4rem
    text-indent: .2rem
    text-align:center
    font-size :.30rem
  .item-img-wrapper
    overflow: hidden
    margin-left:.1rem
    margin-right:.1rem
    height: 0
    padding-bottom: 40%
    .item-img
      width: 100%
      background-repeat: repeat-x
  .item-info
    padding: .1rem
    .item-title
      line-height: .36rem
      font-size: .30rem
      overflow: hidden
      white-space: nowrap
      text-overflow: ellipsis
    .item-desc
      line-height: .4rem
      font-size: .24rem
      color: #ccc
      overflow: hidden
      white-space: nowrap
      text-overflow: ellipsis
     .item-location
      line-height: .36rem
      font-size: .30rem
      overflow: hidden
      white-space: nowrap
      text-overflow: ellipsis
</style>
